Component({
  properties: {
    /* Read Only */
    layout: {
      type: Array,
      value: [],
    },
  },
  data: {
    layoutInternal: {},
    // templateColumns : "",

    // selectedFilterIndices : [],
    // selectedDropdownIndex : -1, // Default to Not Selected
    selectedBarIndex: -1, // Default to Not Selected
    shouldDropdownShow: false,

    // shouldFilterShow : false,
  },
  observers: {
    // filling layouts
    'layout': function (layout) {
      this.setData({
        layoutInternal: layout.map((element) => ({
          displayText: element.displayText,
          displayIcons: element.displayIcons ?? {},
          autoHide: element.autoHide ?? false,
          alignRight: element.alignRight ?? false,
          resettable: element.resettable ?? false,

          filters: element.filters.map((filter) => ({
            multiple: filter.multiple ?? false,
            headerText: filter.headerText,
            showHeaderText: filter.showHeaderText ?? false,
            alignRight: filter.alignRight ?? false,
            type: filter.type,
            key: filter.key,
            name: filter.name,
            options: filter.options,
            optionsValue: filter.optionsValue ?? filter.options.map((e, i) => i),
            defaultIndices: Array.isArray(filter.defaultIndices)
              ? [...filter.defaultIndices]
              : [],
            defaultDate: filter.defaultDate,
            currentIndices: Array.isArray(filter.defaultIndices)
              ? [...filter.defaultIndices]
              : [],
            currentDate: filter.defaultDate,
          }))
        }))
      })
    },
    'shouldDropdownShow': function (shouldDropdownShow) {
      // on close
      if (this.data.shouldDropdownShow === false) this.triggerEvent("change", this.getFilter());

      this.triggerEvent('dropdown-toggle', {hasDropdownShown: shouldDropdownShow})
    }
  },
  methods: {
    onFilterBarItemTap(e) {
      this.setData({
        selectedBarIndex: e.currentTarget.dataset.index,
        shouldDropdownShow: e.currentTarget.dataset.index === this.data.selectedBarIndex
          ? !this.data.shouldDropdownShow
          : true
      })
    },
    getFilter() {
      const {layoutInternal, selectedBarIndex} = this.data;
      return layoutInternal.map(e => {
        return e.filters.map(i => ({
          key: i.key,
          item: i.currentIndices.map(ei => i.optionsValue[ei]).flat()
        }))
      }).flat()
    },
    onOptionItemTap(e) {
      const {layoutInternal, selectedBarIndex} = this.data;
      const {dropdownIndex, optionIndex} = e.currentTarget.dataset;
      const filter = layoutInternal[selectedBarIndex].filters[dropdownIndex];
      const indices = filter.currentIndices;

      if (indices.includes(optionIndex)) { // already selected
        if (filter.defaultIndices.length === 0) { // doesn't have a default index
          indices.splice(indices.indexOf(optionIndex), 1); // remove
        } else { // have a default index
          if (filter.multiple) { // could select multiple
            if (indices.length > 1) { // more than one option selected
              indices.splice(indices.indexOf(optionIndex), 1); // remove
            }
            // if there is less or equal to one option selected, do nothing (you have to left one option selected)
          }
          // only one option could be selected, in that case, do nothing
        }
      } else { // not selected
        if (filter.multiple) { // could select multiple
          indices.push(optionIndex); // add
        } else { // could not select multiple
          filter.currentIndices = [optionIndex] // replace
        }
      }


      this.setData({
        layoutInternal: layoutInternal,
        shouldDropdownShow: !layoutInternal[selectedBarIndex].autoHide
      })
    },

    onConfirmButtonTap(e) {
      this.setData({
        shouldDropdownShow: false
      })
    },

    onResetButtonTap() {
      this.data.layoutInternal[this.data.selectedBarIndex].filters.forEach((filter) => {
        filter.currentIndices = [...filter.defaultIndices];
        filter.currentDate = filter.defaultDate;
      })

      this.setData({
        layoutInternal: this.data.layoutInternal
      })
    },
  },
  lifetimes: {
    // attached() {
    //     console.log(this.properties.items)
    // }
  }
})
